<template>
  <!-- 此组件只用于日期的选择（YYYY-MM-DD）。年份、月份的选择请使用 el-date-picker 原生组件-->
  <el-date-picker
    ref="datepicker"
    v-model="dateValue"
    type="date"
    :placeholder="placeholder"
    :clearable="clearable"
    :size="size"
    :readonly="readonly"
    :editable="editable"
    :disabled="disabled"
    :disabled-date="disabledDate"
    :prefixIcon="prefixIcon"
    :shortcuts="shortcuts"
    arrow-control
    @change="onchange"
    @blur="onblur"
    @focus="onfocus"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
  ></el-date-picker>
</template>

<script lang="ts">
import { PropType, defineComponent, ref, onMounted, watch } from 'vue';
import { UPDATE_MODEL_EVENT, ElComponentSize } from '@/utils/constants';

export default defineComponent({
  props: {
    modelValue: { type: String },//YYYY-MM-DD
    placeholder: { type: String, default: "日期" },
    clearable: { type: Boolean, default: true },
    size: { type: String as PropType<ElComponentSize>, default: "medium" },
    readonly: { type: Boolean, default: false },
    editable: { type: Boolean, default: true },
    disabled: { type: Boolean, default: false },
    disabledDate: { type: Function },
    prefixIcon: { type: [String, Object], default: '' },
    shortcuts: { type: Array, default: () => [], },
  },
  emits: [UPDATE_MODEL_EVENT, 'change', 'blur', 'focus'],
  setup(props, ctx) {
    const datepicker = ref();

    const dateValue = ref(props.modelValue);

    watch(
      () => props.modelValue,
      () => {
        dateValue.value = props.modelValue;
      }
    )

    onMounted(() => {
      dateValue.value = props.modelValue;
    })

    const onchange = (val: any) => {
      debugger;
      ctx.emit(UPDATE_MODEL_EVENT, val);
      ctx.emit('change', val);
    }
    const onblur = () => {
      ctx.emit('blur');
    }
    const onfocus = () => {
      ctx.emit('focus');
    }
    const focus = () => {
      datepicker.value.focus();
    }
    return {
      dateValue,
      onchange,
      onblur,
      onfocus,
      focus,
    }
  }
})
</script>
